import React, { FC, useEffect, useState } from 'react'
import ChartLine from '@/components/pages/chartLine'
import ChartPie from '@/components/pages/chartPie'
import SaleCount from './saleCount'
import ChartBtn from './chartBtn'
import styled from "styled-components"
import { useStores } from '@/store'
import { PageDateSelect } from '@/types/pages/enum'
import { FnCallBack } from '@/types/header/types'
import { IPieChart, ISale, ISaleFull } from '@/types/pages/salesAnalysis/interface'
import { inject, observer } from "mobx-react";
import ChartChina from '@/components/pages/chartChina'
import chinaMap from '@/assert/images/salesAnalysis/china.png'
import nanhai_sea from '@/assert/images/salesAnalysis/nanhai_sea.png'
import bg_big from '@/assert/images/salesAnalysis/bg_big.png'
import { HeaderType } from '@/store/header'
const ContentFrame = styled.div`
    width: 100%;
    position: absolute;
    top: 8.3rem;
    bottom: 0px;
    left: 0px;
    display: flex;
    flex-direction: row;
    .left{
      flex:1 1 48%;
      display: flex;
      flex-direction: column;
      .sale{
        flex:1 1 33%;
        display: flex;
        flex-direction: row;
        .sale-count,.sale-money{
          flex:1
        }
      }
      .map{
        flex:1 1 66%;
        position:relative;
        background-image: url(${bg_big});
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .map-content{
        width: 100%;
        height: 100%;
        /* background-image: url(${chinaMap});
        background-position-x: 30%;
        background-position-y: 30%;
        background-size: 80% 80%;
        background-repeat: no-repeat; */
      }
      .map-content:after{
        content: "";
        position: absolute;
        width: 10.2rem;
        height: 14.1rem;
        bottom: 6rem;
        right: 6rem;
        background-image: url(${nanhai_sea});
        background-size: 100% 100%;
        background-repeat: no-repeat;

      }
    }
    .right{
      flex:1 1 52%;
      display: flex;
      flex-direction: column;
      .chart-pie{
        flex:1 1 55%;
        display: flex;
        .left-pie,.right-pie{
          flex:1;
        }
      }
      .chart-line{
        flex:1 1 45%;
      }
    }
`


const Content: FC<{}> = function () {
  const store = useStores();
  const {sale:salecont,saleMoney,pieLeftChart,pieRightChart,lineChart,chinaChart}=store.sale.screenData;
  const fnCallBack: FnCallBack = (data: Partial<ISaleFull>) => {
    store.header.srtScreenData(data);
    // setScreenData(store.header.headerControl.screenData);
    store.header.setHeaderName('销售分析');
    document.title='销售分析';
  };
  useEffect(() => {
    store.sale.getScreenData(PageDateSelect.year);
    store.header.initHeaderControl(PageDateSelect.year, async (type, fnCallBack,date) => {
      const data = await store.sale.getScreenData(type,date)
      fnCallBack<Partial<ISaleFull>>(data);
    }, fnCallBack)
    // 模拟按钮点击
    store.header.headerControl.changeButton!(PageDateSelect.year, fnCallBack);

  }, [])

  return (
    <ContentFrame>
      <div className='left'>
        <div className='sale'>
          <div className='sale-count'>
            <SaleCount {...salecont} />
          </div>
          <div className='sale-money'>
            <SaleCount {...salecont} />

          </div>
        </div>
        <div className='map'><ChartChina title={chinaChart.title!} dataset={chinaChart.dataset}  /> </div>
      </div>
      <div className='right'>
        <div className='chart-pie'>
          <div className='left-pie'>
            <ChartPie title={pieLeftChart.title!} dataset={pieLeftChart.dataset}/>
          </div>
          <div className='right-pie'>
            <ChartPie title={pieRightChart.title!}  dataset={pieRightChart.dataset}/>
          </div>
        </div>
        <div className='chart-line'>
          <ChartLine title={lineChart.title!}  dataset={lineChart.dataset!}><ChartBtn /></ChartLine>
        </div>
      </div>

    </ContentFrame>
  )
}

export default observer(Content)
